<template>
	<el-button :type="computedType" :loading="loading" @click="handleClick">
		<slot name="icon" v-if="loading !== 'info'"></slot>
		<slot></slot>
	</el-button>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	const loading = ref(false);
	const props = defineProps({
		buttonType: {
			type: String,
			default: 'success',
			validator: (value) => {
				const validTypes = ['primary', 'success', 'warning', 'danger', 'info'];
				return validTypes.includes(value);
			}
		},
		loadingTime: {
			type: Number,
			default: 2000
		}
	});

	const computedType = computed(() => loading.value ? 'info' : props.buttonType);

	const handleClick = () => {
		if (loading.value) return;
		loading.value = true;
		// 通过延时的方法，让按钮在指定时间内失效
		setTimeout(() => loading.value = false, props.loadingTime);
	};
</script>